<template>
    <div>
        <el-form :model="form" label-width="130rem">
            <el-form-item label="输入框提示文字：">
                <el-input v-model="active_component.propValue.text"></el-input>
            </el-form-item>
            <el-form-item label="输入框大小：">
                <div class="flex">
                    <div>宽度(px)：
                        <el-input  style="width:100rem"  v-model="active_component.style.width" placeholder="请输入宽度"></el-input>
                    </div>
                    <div style="margin-left: 30rem;">高度(px)：
                        <el-input style="width:100rem;" v-model="active_component.propValue.borderheight" placeholder="请输入高度"></el-input>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="圆角：">
                <div class="flex">
                    <el-slider
                        :max="active_component.style.height / 2"
                        style="width: 200rem"
                        v-model="active_component.propValue.radius"
                        :show-tooltip="false"
                    ></el-slider>
                    <el-input v-model="active_component.propValue.radius" style="width: 50rem; margin-left: 10rem"></el-input> px
                </div>
            </el-form-item>
            <el-form-item label="边框大小：">
                <div class="flex">
                    <div>边框宽度(px)：
                        <el-input  style="width:50rem"  v-model="active_component.propValue.borderSize" placeholder="请输入边框宽度"></el-input>
                    </div>
                    <div style="margin-left: 50rem;">边框类型：
                        <el-radio v-model="active_component.propValue.borderType" label="solid">实线</el-radio>
                        <el-radio v-model="active_component.propValue.borderType" label="dashed">虚线</el-radio>
                    </div>
                    <div style="margin-left: 50rem;">
                        <div class="flex">边框颜色：<el-color-picker
                            @change="changeColor_gra"
                            v-model="active_component.propValue.themeBtn_gradient_color"
                            show-alpha
                            ></el-color-picker>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="输入框颜色设置：">
                <div class="flex">
                    <div class="flex">背景颜色：<el-color-picker
                    @change="change_input_background"
                    v-model="active_component.propValue.input_background"
                    show-alpha
                    ></el-color-picker>
                </div>
                <div class="flex" style="margin-left: 50rem">字体颜色：<el-color-picker
                    @change="change_input_color"
                    v-model="active_component.propValue.input_color"
                    show-alpha
                    ></el-color-picker>
                </div>
                </div>
            </el-form-item>
        </el-form>
        <div class="flex-center" style="margin-top: 100rem">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ["componentId", "componentList", "activeCompont"],
    data() {
        return {
            form: {
                name: ''
            },
            active_component: {},
        }
    },
    created() {
        if(this.activeCompont){
            this.active_component =this.activeCompont
        }else{
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&
                    this.componentList[key].propValue.name == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
    },
    methods: {
        closeTK(){
            this.$emit("closeTK")
        },
        pushcanvas() {
            if(this.activeCompont){
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = Number(canvasStyle.height);
                component.style.left = 0;
                this.$store.commit("addComponent", { component: component });
                canvasStyle.height = String(Number(canvasStyle.height) + Number(component.style.height));
                this.$store.commit("setCanvasStyle", canvasStyle);
                this.$emit("closeTK")//关闭弹框
            }
        },
        changeColor_gra(e) {
            // document.getElementsByTagName("body")[0].style.setProperty("--themeBtn-gradient-color", e);
            this.active_component.propValue.themeBtn_gradient_color = e
        },
        change_input_background(e) {
            this.active_component.propValue.input_background = e
        },
        change_input_color(e) {
            this.active_component.propValue.input_color =e
        }
    },
}
</script>

<style>

</style>
